<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            box-sizing: border-box;
            width: 300px;
            height: 400px;
            padding: 10px;
            line-height: 30px;
            border: 1px solid gray;
        }
        .title{
            font-size: 16px;
            font-weight: 700;
            display: flex;
            justify-content: space-between;
        }
        .list{
            font-size: 14px;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="title">百度热搜 > 
            <div class="change" >换一换</div> 
        </div>
        <div class="list">
            <!-- <div class="top">继续为各国来华投资提供便利</div>
            <div class="one">1 乌市一方舱有卖淫嫖娼？警方回应 </div>
            <div class="two">2 “红月亮”遇上月掩天王星</div>
            <div class="three">3 前十个月进出口同比增长9.5%</div>
            <div class="four">4 湖南一中学多名学生感染  校长被免职</div>
            <div class="five">5 俄罗斯制裁74家外国公司</div>
            <div class="six">6 深圳楼市双11也打折</div>
            <div class="seven">7 钟睒睒再度成为中国首富</div>
            <div class="eight">8 两名15岁学生被清华录取本硕博连读</div>
            <div class="nine">9 首尔地铁人群混乱 有人喊喘不过气了</div>
            <div class="ten">10 男子月薪5万试用3天被解雇</div> -->
        </div>   
    </div>
</body>
</html>
<script>
    let arr =['继续为各国来华投资提供便利','乌市一方舱有卖淫嫖娼？警方回应','“红月亮”遇上月掩天王星','前十个月进出口同比增长9.5%','湖南一中学多名学生感染  校长被免职','俄罗斯制裁74家外国公司','深圳楼市双11也打折','钟睒睒再度成为中国首富','两名15岁学生被清华录取本硕博连读','首尔地铁人群混乱 有人喊喘不过气了','男子月薪5万试用3天被解雇']
    // 渲染数据列表
    function renderlist(){
        let arrlist = document.querySelector('.list')
    // console.log(arrlist);
        arrlist.innerHTML = arr.map((item)=>{
            return `  
            <div class="top">${item}</div>`
            }).join('')
    }
    renderlist()
    // 给换一换添加点击事件
    let c = document.querySelector('.change')
    c.onclick = function(e){
        
    }
</script>